<template>
  <el-dialog
    v-el-drag-dialog
    :title="title"
    :visible.sync="visible"
    width="800px"
    @closed="closed"
  >
    <el-form ref="form" class="timeForm" :model="form">
      <el-form-item label="精准时间档次">
        <el-select v-model="form.grade" placeholder="请选择" @change="gradeChange">
          <el-option
            v-for="(item,index) in gradeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-for="(ele,index) in form.timeGrade" :key="index" class="timeItem">
        <el-time-select
          v-model="ele.start"
          :disabled="(index!==0)"
          format="HH:mm"
          placeholder="开始时间"
          :picker-options="{
            start:'00:00',
            step: '00:01',
            end:'23:59',
            minTime: index>0?minTimeHandle(form.timeGrade[index-1].end):''
          }"
          @change="startChange(index)"
        />
        <span class="to"> ~ </span>
        <el-time-select
          v-model="ele.end"
          format="HH:mm"
          placeholder="结束时间"
          :picker-options="{
            start:'00:00',
            step: '00:01',
            end:'23:59',
            minTime: ele.start
          }"
          @change="endChange(index)"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: 'preciseTimeAdd',
    data() {
      return {
        title: '',
        visible: false,
        form: {
          timeGrade: [],
          grade: 6
        },
        gradeList: new Array(24).fill(1).map((v, i) => ({ label: `${++i} 档`, value: i })),
        type: ''
      }
    },
    methods: {
      minTimeHandle(val) {
        if (!val) return ''
        const time = val ? val.split(':')[0] : ''
        const t = time ? Number(time) - 1 : '50'
        return t + ': 00'
      },
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.title = '编辑精准时段配置'
            this.type = 'edit'
            this.form.timeGrade = temp.map((item) => ({
              start: item.startTime,
              end: item.endTime
            }))
            this.form.grade = this.form.timeGrade.length
          } else {
            this.title = '新增精准时段配置'
            this.gradeChange()
          }

          console.log(this.gradeList)
        })
      },
      gradeChange() {
        this.form.timeGrade = new Array(Number(this.form.grade)).fill(1).map((v, i) => ({ start: '', end: '' }))
      },
      clearBehind(i) {
        this.form.timeGrade.forEach((item, idx) => {
          if (idx > i) {
            console.log(item)
            this.form.timeGrade[idx].start = ''
            this.form.timeGrade[idx].end = ''
          }
        })
      },
      startChange(i) {
        if (!this.form.timeGrade[i].start) {
          if (i > 0) {
            this.form.timeGrade[i].start = this.form.timeGrade[i - 1].end
          } else {
            this.form.timeGrade[i].start = ''
          }
          this.clearBehind(i)
        }
        if (i > 0 && !this.form.timeGrade[i - 1].end) {
          this.$message.warning('请先选择上一时间段结束时间')
          this.form.timeGrade[i].start = ''
        }
        if (this.form.timeGrade[i].end) {
          this.form.timeGrade[i].end = ''
        }
      },
      endChange(i) {
        this.clearBehind(i)
        if (this.form.timeGrade[i].end) {
          if (!this.form.timeGrade[i].start) {
            this.$message.warning('请先选择上一时间段结束时间')
            this.form.timeGrade[i].end = ''
          } else {
            if (i < this.form.timeGrade.length - 1) {
              this.form.timeGrade[i + 1].start = this.form.timeGrade[i].end
            }
          }
        } else {
          if (i < this.form.timeGrade.length - 1) {
            this.form.timeGrade[i + 1].start = ''
          }
        }
      },
      closed() {
        this.form = {
          timeGrade: [],
          grade: 6
        }
        this.title = ''
      },
      async confirm() {
        const f = this.form.timeGrade.some(item => !item.start || !item.end)
        if (f) {
          this.$message.warning('时间段不能为空')
          return
        } else {
          this.form.type = (this.type && this.type === 'edit') ? 2 : 1
          this.resolve(this.form)
          this.visible = false
        }

        // const res = await appointTimeSettingSave(query)
        // if (res) {
        //   if (this.type && this.type === 'edit') {
        //     this.$message.success('修改成功')
        //   } else {
        //     this.$message.success('新增成功')
        //   }
        // }
      },
      cancel() {
        this.visible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
.timeForm {
  width: 302px;
  margin: 0 auto;
  .timeItem {
    /deep/ .el-form-item__content {
      display: flex;
      .to {
        margin: 0 10px;
      }
    }
  }
}
</style>
